<!--
 * @Author: DESKTOP-D0D7KKT\Administrator 18368095041@163.com
 * @Date: 2024-12-30 11:23:59
 * @LastEditors: DESKTOP-D0D7KKT\Administrator 18368095041@163.com
 * @LastEditTime: 2025-01-02 10:06:11
 * @FilePath: \road-admin-web\src\views\template\GanttView\GanttView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script lang="ts" setup>
// import Gantt from 'frappe-gantt';
// import 'frappe-gantt/dist/frappe-gantt.css';
// import {} from 'dayjs';

// import { treeToArray } from '@/utils';

const ganttChartData = [
    {
        task: '项目整体',
        id: 1,
        startDate: '2024-10-01',
        endDate: '2025-01-10',
        status: 'ongoing',
        children: [
            {
                task: '项目启动阶段',
                id: 2,
                startDate: '2024-10-01',
                endDate: '2024-10-07',
                status: 'finish',
                children: []
            },
            {
                task: '需求分析阶段',
                id: 3,
                startDate: '2024-10-08',
                endDate: '2024-10-21',
                status: 'ongoing',
                children: [
                    {
                        task: '用户调研',
                        id: 4,
                        startDate: '2024-10-08',
                        endDate: '2024-10-14',
                        status: 'finish',
                        children: []
                    },
                    {
                        task: '需求文档编写',
                        id: 5,
                        startDate: '2024-10-15',
                        endDate: '2024-10-21',
                        status: 'ongoing',
                        children: []
                    }
                ]
            },
            {
                task: '开发阶段',
                id: 6,
                startDate: '2024-10-22',
                endDate: '2024-12-31',
                status: 'planned',
                children: [
                    {
                        task: '系统设计',
                        id: 7,
                        startDate: '2024-10-22',
                        endDate: '2024-11-04',
                        status: 'planned',
                        children: []
                    },
                    {
                        task: '前端开发',
                        id: 8,
                        startDate: '2024-11-05',
                        endDate: '2024-12-15',
                        status: 'planned',
                        children: []
                    },
                    {
                        task: '后端开发',
                        id: 9,
                        startDate: '2024-11-10',
                        endDate: '2024-12-20',
                        status: 'planned',
                        children: []
                    }
                ]
            },
            {
                task: '测试与验收阶段',
                id: 10,
                startDate: '2025-01-01',
                endDate: '2025-01-10',
                status: 'planned',
                children: [
                    {
                        task: '系统测试',
                        id: 11,
                        startDate: '2025-01-01',
                        endDate: '2025-01-05',
                        status: 'planned',
                        children: []
                    },
                    {
                        task: '项目验收',
                        id: 12,
                        startDate: '2025-01-06',
                        endDate: '2025-01-10',
                        status: 'planned',
                        children: []
                    }
                ]
            }
        ]
    }
];

const data = ref(ganttChartData);

// onMounted(() => {
//     new Gantt(
//         '#gantt-container',
//         treeToArray(data.value).map((item) => {
//             return {
//                 id: String(item.id),
//                 name: item.task,
//                 start: item.startDate,
//                 end: item.endDate,
//                 progress: 0,
//                 dependencies: ''
//             };
//         }),
//         {
//             header_height: 80
//         }
//     );
// });
</script>

<template>
    <div class="page-container">
        <CustomCard title="" :canCollapse="false">
            <GanttTable
                :data="data"
                row-key="id"
                :gantt-row-props="{
                    id: 'id',
                    name: 'task',
                    start: 'startDate',
                    end: 'endDate',
                    status: 'status'
                }"
            >
                <el-table-column prop="id" label="ID" fixed="left" />
                <el-table-column
                    prop="task"
                    label="任务名称"
                    width="120"
                    fixed="left"
                />
                <el-table-column
                    prop="startDate"
                    label="开始时间"
                    width="90"
                    fixed="left"
                />
                <el-table-column
                    prop="endDate"
                    label="完成时间"
                    width="90"
                    fixed="left"
                />
                <el-table-column prop="status" label="状态" fixed="left" />
                <el-table-column prop="gantt" />
                <el-table-column fixed="right" label="操作">
                    <template #default>
                        <div>一些操作</div>
                    </template>
                </el-table-column>
            </GanttTable>
        </CustomCard>
    </div>
</template>
